<template>
  <div class="category"  >
     <!-- 面包屑导航 -->
    <bread :item="['商品管理','商品分类']"></bread>
    <!-- 卡片视图 -->
    <el-card shadow="hover" v-loading="loading">
      <el-row>
        <el-col>
          <el-button type="primary" @click="seeCateDaialog">添加分类</el-button>
        </el-col>
      </el-row>

      <!-- 内容表格 -->    
      <div class="wrapper" ref="wrapp">
        <tree-table class="heii" :data="cates" :columns="columns" :selection-type="false" @tree-icon-click="refresh"
                  :expand-type="false" show-index  border stripe :show-row-hover="false">
        <!-- 是否有效 -->
        <template slot="iok" slot-scope="scope">
          <i class="el-icon-success" v-if="!scope.row.cat_deleted" style="color:#66c18c"></i>
          <i class="el-icon-error" v-else style="color:#ed3321"></i>
        </template>
        <!-- 等级 -->
        <template slot="order" slot-scope="scope">
          <el-tag v-if="scope.row.cat_level===0">一级</el-tag>
          <el-tag v-else-if="scope.row.cat_level===1" type="success" >二级</el-tag>
          <el-tag v-else type="warning">三级</el-tag>
        </template>

        <template slot="opt" slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row)"></el-button>
          <el-button type="danger" slot="reference" icon="el-icon-delete" size="mini" @click="delCate(scope.row.cat_id)"></el-button>
        </template>
       </tree-table>  
        
      </div>
      <!-- 内容分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[9,15,21]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" background>
      </el-pagination>
    </el-card>

  <!-- 添加分类对话框 -->
  <el-dialog
    title="提示" @close="reset"
    :visible.sync="cateDialog"
    width="50%">

      <el-form  :model="addCateForm" :rules="addCateRules" ref="cateForm" label-width="100px">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addCateForm.cat_name"></el-input>
        </el-form-item>

        <el-form-item label="父级名称">
          <el-cascader
            v-model="catesKey" ref="cascader"
            :options="parentCates" change-on-select
            :props="{ expandTrigger: 'hover',value:'cat_id',label:'cat_name',children:'children' }"
            @change="parentCateChange" clearable>
          </el-cascader>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
      <el-button @click="cateDialog = false">取 消</el-button>
      <el-button type="primary" @click="addCate">确 定</el-button>
     
      
    </span>
  </el-dialog>

  <!-- 修改分类名 -->
  <el-dialog
    title="提示" @close="editReset"
    :visible.sync="editCateDialog"
    width="50%">

      <el-form  :model="editCateForm" :rules="addCateRules" ref="editCateForm" label-width="100px">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="editCateForm.cat_name"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
      <el-button @click="editCateDialog = false">取 消</el-button>
      <el-button type="primary" @click="editCate">确 定</el-button>
    </span>
  </el-dialog>

  </div>
</template>

<script>
import minix from "@/minix"
import {bread} from "tools"
export default {
  mixins:[minix]
  ,components:{
    bread
  }
  ,data(){return{
    //查询条件
    queryInfo:{
      type:3
     ,pagenum:1
     ,pagesize:9
    }
    ,scroll:null
    //商品分类的数据列表
   ,cates:[]
   //总共数据条
   ,total:0
   //指定列的定义
  ,columns:[
    {
      label:"分类名称"
     ,prop:"cat_name"
    }
   ,{
     label:"是否有效"

    //表示将当前列定义成模板列
    ,type:"template"
    ,template:"iok"
   }
   ,{
     label:"等级"
    ,type:"template"
    ,template:"order"
   }
   ,{
     label:"操作"
    ,type:"template"
    ,template:"opt"
   }
  ]
  //显示添加分类对话框
  ,cateDialog:false
  //添加分类的表单数据
  ,addCateForm:{
    cat_name:""
   ,cat_pid:0
   ,cat_level:0
  }
  ,editCateForm:{
    cat_name:""
  }
  //表单验证
  ,addCateRules:{
    cat_name:[
      {required:true,message:"请输入分类名称",trigger:"blur"}
    ]
  }
  //上级分类
  ,parentCates:[]
  //级联选中的分类id
  ,catesKey:[]
  ,editCateDialog:false
  ,editID:null
  ,bb:{}
  ,loading:true
  }}
 ,async created(){
   await this.getCates()
   this.$nextTick(()=>{
     this.loading= false
   })
 }
 ,methods:{
   //获取商品分类数据
   async getCates(){
     let {data:ret}= await this.$XHR.get('categories',{params:this.queryInfo})
     if(ret?.meta?.status !==200)return this.$message({type:"error",message:"获取分类失败",center:"center"})
     this.cates=ret?.data?.result ? ret.data.result :[]
     this.total=ret?.data?.total? ret.data.total :0
   }
  //监听pagesize改变
  ,async handleSizeChange(n){
    this.loading=true
    this.queryInfo.pagesize=n
    await this.getCates()
    
    this.$nextTick(()=>{
      this.refresh()
      this.loading= false
    })
  }
  //监听pagenum改变
  ,async handleCurrentChange(n){
    this.loading=true
    this.queryInfo.pagenum=n
    await this.getCates()
    this.$nextTick(()=>{
      this.refresh()
      this.loading= false
    })
  }
  ,seeCateDaialog(){
    this.cateDialog=true
    this.getParentCates()
  }
  ,async getParentCates(){
    let {data:ret}= await this.$XHR.get('categories',{params:{type:2}})
    if(ret?.meta?.status!==200)return this.$message({type:"error",message:"获取分类失败",center:"center"})
    this.parentCates= ret?.data ? ret.data :[]
  }
  //选项改变触发
  ,parentCateChange(){
    if(this.catesKey.length>0){
      this.addCateForm.cat_pid=this.catesKey[this.catesKey.length-1] 
      this.addCateForm.cat_level=this.catesKey.length
      // return
    }else{
       this.addCateForm.cat_pid= 0
       this.addCateForm.cat_level= 0
    }
  }
  //添加分类
  ,addCate(){
    this.$refs['cateForm'].validate(async bo=>{
      if(!bo) return
      let {data:ret}= await this.$XHR.post("categories",this.addCateForm)
      let [type,message,center]= ['success','添加成功',"center"]
      if(ret?.meta?.status!==201)[type,message]= ['error',"添加失败"]
      
      this.$message({type,message,center,duration:1200})
      this.getCates()
      if(type !=="error")this.cateDialog= false
    })
  }
  //重置添加分类表单
  ,reset(){     
    this.catesKey=[]
    this.addCateForm.cat_pid= 0
    this.addCateForm.cat_level= 0
    this.$refs['cateForm'].resetFields()
  }
  ,editReset(){
    setTimeout(()=>this.$refs['editCateForm'].resetFields(),200)
  }
  ,editCate(){
    this.$refs['editCateForm'].validate(async valid=>{
      if(!valid)return
      let {data:ret}= await this.$XHR.put('categories/'+this.editID,this.editCateForm)
      let nal={
        type:"success"
       ,message:"修改成功"
       ,center:"center"
      }
      if(ret?.meta?.status!==200){
        nal.type="error"
        nal.message="修改失败"
      }
      this.getCates()
      this.$message(nal)
      this.editCateDialog=false

    })
  }
  ,async edit(n){
    this.editID=n.cat_id
    let {data:ret}= await this.$XHR.get('categories/'+n.cat_id)
    if(ret?.meta?.status!==200)return this.$message({type:"error",message:"出错！",center:"center",duration:900})
    this.editCateForm.cat_name=ret?.data?.cat_name ? ret.data.cat_name : ""
    this.editCateDialog=true
  }
  //删除分类
  ,delCate(id){
    let [type,message,center,duration]=[null,"取消删除","center",1200]
    this.$confirm("这将永久删除","提示",{
      confirmButtonText:"确认"
     ,cancelButtonText:"取消"
     ,type:"warning"
    })
    .then(async h=>{
      let {data:ret}= await this.$XHR.delete("categories/"+id)
      if(ret?.meta?.status!==200){
        [type,message]=["error","删除失败"]
        return 
      }
      [type,message]=["success","删除成功"]
    },e=>{}).finally(()=>{
      let nal= type ? {type} :{}
      nal.message=message
      nal.center=center
      nal.duration=duration
      this.$message(nal)
      if(type==="success"){
        //如果是当前lie'b
        this.cates.length===1 && this.queryInfo.pagenum>1 && this.queryInfo.pagenum--
        this.getCates()
      }

    })

  }
 }
}
</script>
<style lang="less" scoped>

.wrapper{
  height: 502px;
  margin-top: 15px;
  overflow: hidden;
}

</style>